<template>
    <div class="setting-security">
        <h2>安全设置</h2>
        <div class="security-options">
            <el-card class="security-item">
                <template #header>
                    <div class="card-header">
                        <span>修改密码</span>
                        <el-button type="text">修改</el-button>
                    </div>
                </template>
                <div class="card-content">
                    建议您定期修改密码，设置安全性高的密码组合
                </div>
            </el-card>
        </div>
    </div>
</template>

<style lang="less" scoped>
.setting-security {
    h2 {
        margin-bottom: 30px;
        font-size: 24px;
    }

    .security-options {
        max-width: 600px;
    }

    .security-item {
        margin-bottom: 20px;
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-content {
            color: #666;
            font-size: 14px;
        }
    }
}
</style>